{% extends "user_base.html" %}
{% block title %}
个人中心
{% endblock %}


{% block subtitle %}
个人中心
{% endblock %}

{% block main %}个人中心{% endblock %}


{% block content %}

<!--表格健康档案-->
<section class="section profile">
  <div class="row">
    


    <!--    雷达图结束-->

    <div class="col-lg-12">

      <div class="card">
        <div class="card-body pt-3">
          <!-- Bordered Tabs -->
          <ul class="nav nav-tabs nav-tabs-bordered">

            <li class="nav-item">
              <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#profile-overview">信息</button>
            </li>

            <!--                <li class="nav-item">-->
            <!--                  <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-edit">编辑</button>-->
            <!--                </li>-->

            <!--                <li class="nav-item">-->
            <!--                  <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-settings">Settings</button>-->
            <!--                </li>-->

            <li class="nav-item">
              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-change-password">修改密码</button>
            </li>

          </ul>
          <div class="tab-content pt-2">

            <div class="tab-pane fade show active profile-overview" id="profile-overview">
              <!--                  <h5 class="card-title">About</h5>-->
              <!--                  <p class="small fst-italic">Sunt est soluta temporibus accusantium neque nam maiores cumque temporibus. Tempora libero non est unde veniam est qui dolor. Ut sunt iure rerum quae quisquam autem eveniet perspiciatis odit. Fuga sequi sed ea saepe at unde.</p>-->

              <h5 class="card-title">个人基本信息</h5>


              <div class="row">
                <div class="col-lg-3 col-md-4 label ">姓名</div>
                <div class="col-lg-9 col-md-8">{{user.user_name}}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">性别</div>
                <div class="col-lg-9 col-md-8">{{user.user_sex}}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">年龄</div>
                <div class="col-lg-9 col-md-8">{{user.user_age}}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">身高</div>
                <div class="col-lg-9 col-md-8">{{nui.user_height}}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">体重</div>
                <div class="col-lg-9 col-md-8">{{nui.user_weight}}</div>
              </div>
              <div class="row">
                <div class="col-lg-3 col-md-4 label">电话号</div>
                <div class="col-lg-9 col-md-8">{{user.phone}}</div>
              </div>
              <div class="row">
                <div class="col-lg-3 col-md-4 label">身份证号</div>
                <div class="col-lg-9 col-md-8">{{user.id_no}}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">药物过敏史</div>
                <div class="col-lg-9 col-md-8">{{nui.allergy}}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">疾病</div>
                <div class="col-lg-9 col-md-8">{{nui.illness}}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">残疾</div>
                <div class="col-lg-9 col-md-8">{{nui.disability}}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">常用药</div>
                <div class="col-lg-9 col-md-8">{{nui.common_drugs}}</div>
              </div>

            </div>

            <div class="tab-pane fade profile-edit pt-3" id="profile-edit">



            </div>

            <div class="tab-pane fade pt-3" id="profile-change-password">
              <!-- Change Password Form -->
              <!-- <form> -->

                <div class="row mb-3">
                  <label for="currentPassword" class="col-md-4 col-lg-3 col-form-label">旧密码</label>
                  <div class="col-md-8 col-lg-9">
                    <input name="password" type="password" class="form-control" id="currentPassword">
                  </div>
                </div>

                <div class="row mb-3">
                  <label for="newPassword" class="col-md-4 col-lg-3 col-form-label">新密码</label>
                  <div class="col-md-8 col-lg-9">
                    <input name="newpassword" type="password" class="form-control" id="newPassword">
                  </div>
                </div>

                <div class="row mb-3">
                  <label for="renewPassword" class="col-md-4 col-lg-3 col-form-label">确认新密码</label>
                  <div class="col-md-8 col-lg-9">
                    <input name="renewpassword" type="password" class="form-control" id="renewPassword">
                  </div>
                </div>
                <div id="message">
                  
                </div>

                <div class="text-center">
                  <button type="button" class="btn btn-primary" id="butchangepwd">修改密码</button>
                </div>
              <!-- </form> -->
              <!-- End Change Password Form -->

              <script>
                $(function () {
                  $("#butchangepwd").click(function () {
                    // 获取用户名和密码
                    var cp = $("#currentPassword").val();//旧密码
                    var p1= $("#newPassword").val();//新密码
                    var p2 = $("#renewPassword").val();//二次输入
                    if (cp==p1){
                      $("#message").html('<div class="alert alert-danger">新密码不能和旧密码一致</div>')
                      // alert(11111)
                      return 
                    }
                    if (p1!=p2){
                      $("#message").html('<div class="alert alert-danger">两次密码不一致</div>')
                      // alert(11111)
                      return 
                    }
                    
                    // 此参数需要传递给后端,否则会csrf禁止,报403错误
                    var csrf = $('input[name="csrfmiddlewaretoken"]').val();
                    // 发起ajax请求
                    $.ajax({
                      url: "/user/change_pwd/",  // 请求的地址
                      type: "post",  // 请求方式
                      // 请求时传递过去的数据
                      data: { "old_pwd": cp, "new_pwd": p1,"renewPassword": p2, 'csrfmiddlewaretoken': csrf },
                      dataType: "json",  // 返回的数据格式
                      async: true,  // 异步的ajax
                    }).success(function (data) {
                      if (data.res == 2) {
                        // 请求成功实现页面跳转
                        $("#message").html(data.info);
                      }
                      else if (data.res == 1) {
                        // 请求失败，显示错误信息
                        $("#message").show();
                        $("#message").html(data.info);
                      }
                      else if (data.res == 0) {
                        // 请求失败，显示错误信息
                        $("#message").show();
                        $("#message").html(data.info);
                      }

                    })
                  })
                })
              </script>


            </div>

          </div><!-- End Bordered Tabs -->

        </div>
      </div>

    </div>
  </div>
</section>
<!--   健康档案结束   -->




{% endblock %}